<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2023/3/2
  Time: 10:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门列表</title>
    <!--引入jquery-->
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <style>
        #div2{
            width: 400px;
            height: 400px;
            background-color: pink;
            position: absolute;
            top: 100px;
            left: 700px;
        }
        #dialog{
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(212,212,212,.5);
        }
    </style>
</head>
<body>
<div id="div1">
<h3 align='center'>部门管理</h3>
<div style="text-align: center"><button class="add_btn" onclick="showDialog()">添加</button>&nbsp;<a href="/home.jsp">返回首页</a></div>
<div style="text-align: center">
    部门名称：<input type="text" id="deptName">&nbsp;
    位置：<input type="text" id="loc">&nbsp;
    <input type="button" id="searchBtn" value="查询">
</div>
<table align='center' border='0' width='80%' style='text-align:center' cellspacing="0">
    <tr style='background-color:#ff5858; line-height: 40px ;font-size: 30px; color: white'>
        <td>部门编号</td>
        <td>名称</td>
        <td>位置</td>
        <td>操作</td>
    </tr>
    <tbody id="tbd" style=" line-height: 30px ;">
    </tbody>
    <tr style='background-color:#ff5858 ; line-height: 30px ;'>
        <td colspan="4">共<span id="total"></span>条<span id="maxPage"></span>页&nbsp;&nbsp;
            <a id="firstPage" href="javascript:void(0)">首页</a>&nbsp;
            <a id="prePage" href="javascript:void(0)">上一页</a>&nbsp;
            <a id="nextPage" href="javascript:void(0)">下一页</a>&nbsp;
            <a id="lastPage" href="javascript:void(0)">尾页</a>
        </td>
    </tr>
</table>
</div>
<div id="dialog" style="display: none">
<div align="center" id="div2" >
    <h3 align='center'>部门添加/更新</h3>

            <input type="hidden" name="deptNo">
           部门名称：<input type="text" name="deptName" id="add_dept_name">
            <br>
           部门位置：<input type="text" name="loc" id="add_loc">

    <div>
                <input type="button" id="addbtn" value="添加">
                <button  id="quxiao" onclick="disshowDialog()">取消</button>
    </div>

</div>
</div>
<script>
    //定义全局变量，让各个方法都可以调回用
    let pageNo = 1, maxPage = 0, total = 0, deptNameA = '', locA = '';
    //jquery初始化方法   需要页面初始化加载的代码放入这里面，相当于onload
    $(function () {
        // alert(111);
        //调用封装方法
        loadData();
        //首页点击事件
        $("#firstPage").click(function () {
            pageNo = 1;
            loadData();
        });
        //上一页点击事件
        $("#prePage").click(function () {
            pageNo--;
            loadData();
        });
        //下一页点击事件
        $("#nextPage").click(function () {
            pageNo++;
            loadData();
        });
        //尾页点击事件
        $("#lastPage").click(function () {
            pageNo = maxPage;
            loadData();
        });
        //查询点击事件
        $("#searchBtn").click(function () {
            deptNameA = $("#deptName").val();
            locA = $("#loc").val();
            loadData();
        });
    });
    //加载数据方法
    function loadData() {
        //使用jquery的ajax从后台获取数据
        $.ajax({
            url: "/DeptServlet/queryPage",//请求的地址
            type: "get",//请求方式
            data: {pageNo: pageNo, deptName: deptNameA, loc: locA},//请求携带的参数
            dataType: "json",//定义返回值格式
            success: function (data) {//成功回调函数  data=返回的json对象
                //清除原有数据
                $("#tbd").empty()
                //判断data是否有值
                if (data != null && data != '' && data != 'undefined' && data != 'null') {
                    //给总条数赋值
                    $("#total").html(data.total);
                    $("#maxPage").html(data.maxPage);
                    //给maxPage赋值
                    maxPage = data.maxPage;
                    //给total赋值
                    total = data.total;
                    //获取对象列表信息 循环遍历
                    for (let i = 0; i < data.deptList.length; i++) {
                        // 11	财务1部1	郑州1111啊1   再循环一次   112	市场1啊部	洛阳1啊  -> .....
                        const deptList = data.deptList[i];
                        if (i % 2 == 0) {
                            $("#tbd").append("<tr style='background-color:#ffffff'><td>" + deptList.deptNo + "</td>" +
                                "<td>" + deptList.deptName + "</td><td>" + deptList.loc + "</td><td>" +
                                " <a href='/dept/update.jsp?deptNo=" + deptList.deptNo + "'>更新</a>&nbsp;&nbsp;" +
                                " <a href='javascript:del(" + deptList.deptNo+ ")'>删除</a></td></tr>");
                        } else {
                            $("#tbd").append("<tr style='background-color:#cecece'><td>" + deptList.deptNo + "</td>" +
                                "<td>" + deptList.deptName + "</td><td>" + deptList.loc + "</td><td>" +
                                " <a href='/dept/update.jsp?deptNo=" + deptList.deptNo + "'>更新</a>&nbsp;&nbsp;" +
                                " <a href='javascript:del(" + deptList.deptNo + ")'>删除</a></td></tr>");
                        }
                    }
                }
            },
            error: function (errorData) {
                alert("请求失败！");
            }
        });
    }
    //点击新增
    function showDialog() {
        $("#div2>input").val("");
        dialog.style.display = "block";
    }
    function disshowDialog() {
        dialog.style.display = "none";
    }
    //添加方法
    $("#addbtn").click(function () {
        $.ajax({
                url: "/DeptServlet/add",		  //请求的路径，获取数据源
                type: "post",			  //请求的方式
                dataType: "json",		  //请求返回的数据类型
                data: {
                    deptName: $("#add_dept_name").val(),
                    loc: $("#add_loc").val(),
                },
                success: function (data) {
                    alert("添加成功");
                    disshowDialog();
                    loadData();
                }
            }
        )
    })

    //删除方法
    function del(deptNo) {
        if (confirm("您确定删除吗")) {
            $.ajax({
                url: "/DeptServlet/delete",		  //请求的路径，获取数据源
                type: "get",			  //请求的方式
                dataType: "json",		  //请求返回的数据类型
                contentType: "application/json;charset=utf-8",
                 data: {deptNo:deptNo},
                success: function (data) {//请求成功做的事
                    alert(deptNo);
                    alert("删除成功");
                    loadData();
                }
            })
        }
    }
    

</script>
</body>
</html>
